<template>
  <div class="user-portrait">
    <div class="mine-dropdown">
      <div class="mine-dropdown-header opened">
        <p class="mine-img-area">
          <span class="mine-img-box">
            <i class="mine-img" :style="{backgroundImage: `url(` + user.headpic + `)`}"></i>
          </span>
        </p>
        <el-icon class="mine-arrow"><arrow-up /></el-icon>
      </div>

      <div class="mine-dropdown-sub mine-box">
        <el-menu :default-openeds="['1']">
          <el-menu-item-group>
            <template #title>{{user.name}}</template>
            <el-menu-item index="1-1" @click="onAdmin">
              <a href="javascript:;"><i class="jy-icon-list"></i> 我的作品</a>
            </el-menu-item>
            <el-menu-item index="1-2" @click="onTemp">
              <a href="javascript:;"><i class="jy-icon-my-template"></i> 模板列表</a>
            </el-menu-item>
            <hr style="margin: 10px 2px 2px 2px; color: #aaa;"/>
            <el-menu-item index="1-3" @click="click2ResetPassword">
              <a href="javascript:;"><i class="jy-icon-locking"></i> 更改密码</a>
            </el-menu-item>
            <el-menu-item index="1-4" @click="click2Logout">
              <a href="javascript:;"><i class="jy-icon-withdraw"></i> 退出登录</a>
            </el-menu-item>
          </el-menu-item-group>
        </el-menu>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState, mapActions } from 'vuex';
  import { EventBus } from '@/store/index';
  export default {
    name: 'UserPortrait',
    computed: {
      ...mapState({
        user: state => _.cloneDeep(state.user.user),  // 用户信息，用来判断是否登录
      }),
    },
    methods: {
      ...mapActions({
        logout: "user/logout",
      }),
      onAdmin() {
        this.$router.push('/admin/produ');
      },
      onTemp() {
        this.$router.push('/admin/temp');
      },
      click2ResetPassword() {
        EventBus.$emit('ReserPasswordLayoutShow', true);
      },
      click2Logout() {
        let link = '#/';
        this.logout({
          jumpLink: encodeURIComponent(link),
        });
      },
    },
  }
</script>

<style lang="scss" scoped>
  @-webkit-keyframes morph {
    0% {
      border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
    }
    100% {
      border-radius: 40% 60%;
    }
  }
  @keyframes morph {
    0% {
      border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
    }
    100% {
      border-radius: 40% 60%;
    }
  }
  @-webkit-keyframes spin {
    to {
      transform: rotate(1turn);
    }
  }
  @keyframes spin {
    to {
      transform: rotate(1turn);
    }
  }

  .user-portrait {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .mine-img-area {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 34px;
    margin-right: 10px;
    vertical-align: middle;
    // animation: spin 12s linear infinite;

    .mine-img-box {
      position: relative;
      display: inline-block;
      width: 34px;
      height: 34px;
      margin-right: 10px;
      vertical-align: middle;
      border: 1px solid transparent;
      transition: border-radius 1s ease-out;
      border-radius: 50%;
      // border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
      // animation: morph 8s ease-in-out infinite both alternate;
      overflow: hidden;

      .mine-img {
        position: absolute;
        // left: -20%;
        // top: -20%;
        display: block;
        // width: 140%;
        // height: 140%;
        width: 100%;
        height: 100%;
        background-size: cover;
        // animation: spin 12s linear infinite reverse;
      }
    }
  }
  .mine-dropdown {
    position: relative;
    display: inline-block;
    padding: 10px 0;

    .mine-dropdown-header {
      .mine-pic{
        width: 34px;
        height: 34px;
        margin-right: 10px;

        border-radius: 50%;
        vertical-align: middle;
      }

      .mine-arrow{
        font-size: 12px;
        vertical-align: middle;
        transition: transform .3s ease-in-out;
      }
    }

    .mine-dropdown-sub {
      display: none;
      background-color: #fff;
      border-radius: 2px;
      box-shadow: 2px 2px 10px #eee;
    }

    .mine-box{
      position: absolute;
      top: 54px;
      right: 0px;
      padding-bottom: 12px;
      overflow: hidden;
      animation: subhide .3s ease-in-out 1;

      .el-menu {
        border: none !important;
      }

      .el-menu-item-group__title{
        padding: 7px 7px !important;
        text-align: center;
        margin-bottom: 12px;
        color: #43475C !important;
      }

      .el-menu-item{
        font-size: 12px !important;
        line-height: 31px !important;
        height: auto !important;

        a{
          color: #43475C !important;
        }
      }
    }
  }
  .mine-dropdown:hover {
    .mine-dropdown-sub {
      display: inherit;
    }

    .opened{
      .mine-arrow{
        transform: rotateZ(180deg);
      }
    }
  }
</style>
